<template>
  <div class="app-container">
    <div class="card-box-list">
      <el-row :gutter="20">
        <el-col :span="12">
          <el-card class="workflow-card">
            <div class="header">
              <div>
                <img src="~@/assets/images/home/icon1.png" class="icon">
                <span class="title">流程问卷</span>
              </div>
              <p class="desc">
                请及时清理待办任务，可以有效提升流程效率
              </p>
            </div>
            <div class="body">
              <el-row align="middle" type="flex">
                <el-col :span="8" @click.native="$router.push({path: '/workflow/process'})">
                  <count-to :end-val="workflowCount.startCount" class="count" />
                  <p class="name">
                    我的流程
                  </p>
                </el-col>
                <el-col :span="8" @click.native="$router.push({path: '/workflow/todo'})">
                  <count-to :end-val="workflowCount.todoCount" class="count" style="color: rgba(255, 87, 51, 1)" />
                  <p class="name">
                    待办任务
                  </p>
                </el-col>
                <el-col :span="8" @click.native="$router.push({path: '/workflow/finished'})">
                  <count-to :end-val="workflowCount.finishCount" class="count" />
                  <p class="name">
                    已办任务
                  </p>
                </el-col>
              </el-row>
            </div>
          </el-card>
        </el-col>
        <el-col :span="12">
          <el-card class="msg-card">
            <div class="header">
              <div @click="$router.push({path: '/msg/myMsg'})">
                <img src="~@/assets/images/home/icon2.png" class="icon">
                <span class="title">消息通知</span>
              </div>
            </div>
            <div class="body">
              <el-empty v-if="msgList.length===0" :image-size="80" description="暂无未读通知" />
              <div v-else>
                <el-scrollbar style="height: 180px">
                  <el-row v-for="msg in msgList" :key="msg.id" class="msg-line"
                          type="flex" align="middle" justify="center"
                          @click.native="$router.push({path: '/msg/myMsg'})"
                  >
                    <el-col :span="12">
                      <span class="badge" />
                      <span class="text-overflow msg-text">{{ msg.title }}</span>
                    </el-col>
                    <el-col :span="8">
                      <span>{{ msg.sendTime }}</span>
                    </el-col>
                    <el-col :span="4">
                      <span>
                        <el-tag type="success">{{ msg.sender }}</el-tag>
                      </span>
                    </el-col>
                  </el-row>
                </el-scrollbar>
              </div>
            </div>
          </el-card>
        </el-col>
      </el-row>
    </div>
    <el-card class="table-card">
      <el-row class="header">
        <el-col :span="5">
          <div>
            <img src="~@/assets/images/home/icon3.png" class="icon">
            <span class="title">普通问卷</span>
          </div>
        </el-col>
        <el-col :offset="13" :span="6">
          <el-input v-model="queryParams.name" placeholder="输入项目名称搜索" prefix-icon="el-icon-search"
                    @change="queryProjectPage"
          />
        </el-col>
      </el-row>
      <el-table
        class="mt10"
        :data="projectList"
        style="width: 100%"
        @row-click="handleRowClick"
      >
        <el-table-column
          label="项目名称"
          prop="textName"
        />
        <el-table-column
          align="center"
          label="状态"
        >
          <template slot-scope="scope">
            <el-tag v-if="scope.row.status==1">
              未发布
            </el-tag>
            <el-tag v-if="scope.row.status==2" type="success">
              已发布
            </el-tag>
            <el-tag v-if="scope.row.status==3" type="danger">
              已结束
            </el-tag>
          </template>
        </el-table-column>
        <el-table-column
          label="创建时间"
          prop="createTime"
        />
      </el-table>
    </el-card>
    <el-card class="fun-card">
      <div class="header">
        <div>
          <span class="title">常用功能</span>
        </div>
      </div>
      <div class="body ">
        <div class="fun-btn" @click="$router.push({path: '/project/my'})">
          <img src="~@/assets/images/home/icon4.png">
          <span>问卷管理</span>
        </div>
        <div class="fun-btn" @click="$router.push({path: '/workflow/todo'})">
          <img src="~@/assets/images/home/icon5.png">
          <span>我的待办</span>
        </div>
        <div class="fun-btn" @click="$router.push({path: '/project/my'})">
          <img src="~@/assets/images/home/icon6.png">
          <span>我的已办</span>
        </div>
        <div class="fun-btn" @click="$router.push({path: '/msg/myMsg'})">
          <img src="~@/assets/images/home/icon7.png">
          <span>消息中心</span>
        </div>
        <div class="fun-btn" @click="$router.push({path: '/system/user'})">
          <img src="~@/assets/images/home/icon8.png">
          <span>用户管理</span>
        </div>
      </div>
    </el-card>
  </div>
</template>

<script>
import {pageFormRequest} from '@/api/project/form'
import CountTo from "../../components/CountTo"
import {workflowCountsRequest} from "../../api/dashboard"
import {getMyAnnouncementSend, getMyUnReadAnnouncementSend} from "../../api/system/announcement"

export default {
  name: "Index",
  components: {CountTo},
  data() {
    return {
      projectList: [],
      queryParams: {
        current: 1,
        size: 5,
        name: '',
        beginDateTime: null,
        endDateTime: null,
        status: null,
        folderId: 0,
        folder: false
      },
      workflowCount: {
        startCount: 0,
        todoCount: 0,
        finishCount: 0
      },
      msgList: []
    }
  },
  created() {
    this.queryProjectPage()
    workflowCountsRequest().then((res) => {
      this.workflowCount = res.data
    })
    getMyUnReadAnnouncementSend({
      current: 1,
      size: 5
    }).then((response) => {
      this.msgList = response.data
    })

  },
  methods: {
    queryProjectPage() {
      pageFormRequest(
        this.queryParams
      ).then((res) => {
        let {records, total, size} = res.data
        this.projectList = records
        this.total = total
        this.queryParams.size = size
        this.projectListLoading = false
      })
    },
    handleRowClick(row) {
      this.$router.push({path: '/project/form/editor', query: {key: row.formKey}})
    }
  }
}
</script>

<style lang="scss" scoped>
.app-container {
  //background: var(--color-bg);
  height: calc(100vh - 50px);
}

.header {
  div:first-child {
    line-height: 40px;
  }

  .title {
    color: rgba(112, 112, 112, 1);
    font-size: 18px;
    margin-left: 5px;
    vertical-align: middle;
    cursor: pointer;
  }

  .desc {
    color: rgba(112, 112, 112, 1);
    font-size: 10px;
  }
}

.card-box-list {
  max-width: 1380px;
  margin: 20px auto;
}

.workflow-card {
  .body {
    height: 200px;
    padding-top: 50px;

    .count {
      font-size: 36px;
      display: block;
      text-align: center;
      cursor: pointer;
    }

    .name {
      color: rgba(112, 112, 112, 1);
      font-size: 18px;
      text-align: center;
      cursor: pointer;
    }
  }

  height: 243px;
  border-radius: 10px;
}

.msg-card {
  span {
    color: rgba(112, 112, 112, 1);
    font-size: 12px;
  }
  .msg-text{
    width: 90%;
    display: inline-block;
    line-height: 20px;
    vertical-align: middle;
  }

  .msg-line {
    margin: 10px 20px;
    cursor: pointer;
  }

  border-radius: 10px;
  height: 243px;
}

.icon {
  width: 35px;
  height: 35px;
  display: inline-block;
  vertical-align: middle;
}


.table-card, .fun-card {
  max-width: 1380px;
  margin: 20px auto;
  border-radius: 10px;
}

.fun-btn {
  width: 170px;
  height: 50px;
  background-color: rgba(196, 196, 196, 0.25);
  border-radius: 5px;
  line-height: 50px;
  text-align: center;
  cursor: pointer;
  float: left;
  margin: 5px 10px 20px 10px;

  span {
    display: inline-block;
    vertical-align: middle !important;
    color: rgba(128, 128, 128, 0.62);
    font-size: 18px;
  }

  img {
    width: 20px;
    height: 20px;
    display: inline-block;
    vertical-align: middle !important;
    margin-right: 5px;
  }
}

.badge {
  width: 6px;
  height: 6px;
  background-color: rgba(67, 207, 124, 1);
  display: inline-block;
  border-radius: 10px;
  margin-right: 10px;
}


</style>
